<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS效果</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("#bigger").click(function () {
                $("#d1").css("font-size", parseInt($("#d1").css("font-size")) + 2 + "px");
            });
            $("#small").click(function () {
                $("#d1").css("font-size", parseInt($("#d1").css("font-size")) - 2 + "px");
            });
            $("#hide").click(function () {
                // $("#d1").css("display","none");
                // 无参hide,直接隐藏
                // $("#d1").hide();
                // 有参hide,参数为毫秒数
                // 表示在指定的毫秒数内,通过高度、宽度、透明度的变化
                // 将元素逐渐的隐藏起来
                // $("#d1").hide(3000);
                // 淡出效果
                // 通过透明度的变化隐藏元素
                // $("#d1").fadeOut();
                // $("#d1").fadeOut(3000);
                // 滑动效果
                $("#d1").slideUp(3000);
            });
            $("#show").click(function () {
                // $("#d1").css("display","block");
                // 无参的show,直接显示
                // $("#d1").show();
                // 有参show,参数为毫秒数
                // 表示在指定的毫秒数内,通过高度、宽度、透明度的变化
                // 将元素逐渐的显示出来
                // $("#d1").show(3000);
                // 淡入效果
                // 通过透明度的变化显示元素
                // $("#d1").fadeIn();
                // $("#d1").fadeIn(3000);
                // 滑动效果
                $("#d1").slideDown(3000);
            });
            $("#sh").click(function () {
                // toggle表示隐藏或者显示
                // 当元素隐藏,则为显示效果
                // 当元素显示,则为隐藏效果
                // 其相当于hide方法与show方法的合成体
                // 可以无参,可以有参
                // $("#d1").toggle();
                // $("#d1").toggle(3000);
                // 淡入淡出效果,在指定的毫秒数内将元素的透明度改为指定的值
                // 参数一:毫秒数
                // 参数二:透明度
                    // 透明度值的范围为0-1
                    // 0:完全透明,即隐藏
                    // 1:完全显示,即显示
                // $("#d1").fadeTo(3000,0.5);
                // 滑动效果
                $("#d1").slideToggle(3000);
            });
        });
    </script>
</head>
<body>
<input type="button" value="放大" id="bigger"/>
<input type="button" value="缩小" id="small"/>
<input type="button" value="隐藏" id="hide"/>
<input type="button" value="显示" id="show"/>
<input type="button" value="显示或隐藏" id="sh"/>
<div id="d1" style="width: 30%;background: #dddddd;">
    <p>第1个段落</p>
    <p>第2个段落</p>
    <p>第3个段落</p>
    <p>第4个段落</p>
    <p>第5个段落</p>
</div>
</body>
</html>